<script>
import { computed, defineComponent, reactive, ref, toRaw } from 'vue'
import * as Antd from 'ant-design-vue'
import MakeForm, { MakeFormState } from '@Components/makeForm'
import { computedStringLength, allSpace } from '@Untils'
import TagsList from '@Page/myMarkGroup/components/tagsList'
import DataTable from '@Components/dataTable'
import { uniqueId } from 'lodash'
import { message, Space } from 'ant-design-vue'
import { Messages } from '@Config/config'

export default defineComponent({
  components: {
    MakeForm,
  },
  props: {
    record: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  setup(props, context) {
    let record = computed(() => {
      return { ...toRaw(props.record) }
    })

    let form_config = [
      {
        key: 'name',
        initValue: record.value.name || null,
        uiType: 'input',
        col: { span: 24 },
        formItem: { label: '名称' },
        attr: { placeholder: '请输入好友用户名', allowClear: true },
        rule: [
          {
            required: true,
            message: '请输入好友用户名',
          },
          {
            validator: allSpace,
            message: '请输入正确的好友用户名',
          },
          // {
          //   message: `好友用户名不能超过${validator_config.cate_name_max_length}个字符`,
          //   maxStringLength: validator_config.cate_name_max_length,
          //   validator: (rule, value) => {
          //     let total = computedStringLength(value || '').total
          //     return total <= rule.maxStringLength
          //       ? Promise.resolve()
          //       : Promise.reject()
          //   },
          // },
        ],
      },

      {
        key: 'button',
        initValue: null,
        uiType: 'custom',
        col: { span: 24 },
        ui: (
          <Antd.Space>
            <Antd.Button
              type="primary"
              onClick={() => {
                form_ref.value.validate().then(() => {
                  if (/[A-Z]/g.test(form_state.data.name)) {
                    Messages.add(message.error('未找到好友！'))
                    tableData.data.source = []
                    return
                  }

                  tableData.data.source = (() => {
                    let _r = []
                      _r.push({ name: 'kirkren' , id: uniqueId() })
                    return _r
                  })()
                })
              }}
              loading={loading.value}
            >
              确定
            </Antd.Button>

            <Antd.Button
              type="primary"
              danger
              onClick={() => {
                context.emit('close')
              }}
            >
              取消
            </Antd.Button>
          </Antd.Space>
        ),
      },
    ]
    let form_state = reactive({ data: MakeFormState(form_config) })
    let form_ref = ref(null)
    let loading = ref(false)
    let tableData = reactive({
      data: {
        source: [],
        columns: [
          {
            key: 'name',
            dataIndex: 'name',
            title: '用户名',
          },
          {
            key: 'oper',
            dataIndex: 'oper',
            title: '操作',
            transform: (text, record, index) => {
              return (
                <Antd.Space>
                  {!record.isAdd && (
                    <Antd.Button
                      type="primary"
                      onClick={() => {
                        record.isAdd = true
                        Messages.add(message.success('添加好友发送申请...'))
                      }}
                    >
                      添加好友
                    </Antd.Button>
                  )}
                  {record.isAdd && <span>添加好友发送申请</span>}
                </Antd.Space>
              )
            },
          },
        ],
      },
    })

    return { form_config, form_state, form_ref, loading, tableData }
  },
  render() {
    return (
      <Antd.Row gutter={[20, 20]}>
        <Antd.Col span={24}>
          <MakeForm
            ref="form_ref"
            formConfig={this.form_config}
            value={this.form_state.data}
          />
        </Antd.Col>

        <Antd.Col span={24}>
          <DataTable
            data={this.tableData}
            uiAttr={{
              scroll: { x: null },
              tableLayout: 'fixed',
              bordered: true,
            }}
          ></DataTable>
        </Antd.Col>
      </Antd.Row>
    )
  },
})
</script>
